<template>
  <div class="app-container">
    <el-form
      ref="settingForm"
      :model="settingForm"
      :rules="settingRules"
      label-width="200px"
    >
      <el-form-item label="是否启用电子卡" prop="cardEnabledFlag">
        <el-radio-group v-model="settingForm.cardEnabledFlag">
          <el-radio label="0">关闭</el-radio>
          <el-radio label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-if="settingForm.cardEnabledFlag == 1">
        <el-form-item label="权限设置" prop="cardUseRangeFlag">
          <el-radio-group v-model="settingForm.cardUseRangeFlag">
            <el-radio label="1">多站通用</el-radio>
            <el-radio label="2">单站使用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="启用哪种电子卡">
          <el-checkbox-group
            v-model="settingForm.cardOilsTypeList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="0">通用卡</el-checkbox>
            <el-checkbox label="1">汽油卡</el-checkbox>
            <el-checkbox label="2">柴油卡</el-checkbox>
            <el-checkbox label="3">LNG卡</el-checkbox>
            <el-checkbox label="4">CNG卡</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          prop="genericMinAmt"
          label="通用卡最低充值金额"
          v-if="settingForm.cardOilsTypeList.includes('0')"
        >
          <el-input
            v-model="settingForm.genericMinAmt"
            style="width: 60px"
            size="mini"
          />元
        </el-form-item>

        <el-form-item
          prop="gasolineMinAmt"
          label="汽油卡最低充值金额"
          v-if="settingForm.cardOilsTypeList.includes('1')"
        >
          <el-input
            v-model="settingForm.gasolineMinAmt"
            style="width: 60px"
            size="mini"
          />元
        </el-form-item>
        <el-form-item
          prop="dieselMinAmt"
          label="柴油卡最低充值金额"
          v-if="settingForm.cardOilsTypeList.includes('2')"
        >
          <el-input
            v-model="settingForm.dieselMinAmt"
            style="width: 60px"
            size="mini"
          />元
        </el-form-item>

        <el-form-item
          prop="lngMinAmt"
          label="LNG卡最低充值金额"
          v-if="settingForm.cardOilsTypeList.includes('3')"
        >
          <el-input
            v-model="settingForm.lngMinAmt"
            style="width: 60px"
            size="mini"
          />元
        </el-form-item>

        <el-form-item
          prop="cngMinAmt"
          label="CNG卡最低充值金额"
          v-if="settingForm.cardOilsTypeList.includes('4')"
        >
          <el-input
            v-model="settingForm.cngMinAmt"
            style="width: 60px"
            size="mini"
          />元
        </el-form-item>
        <!--
        <el-form-item
          label="汽油卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('1')"
        >
          <el-checkbox-group
            v-model="settingForm.gasolineRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="柴油卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('2')"
        >
          <el-checkbox-group
            v-model="settingForm.dieselOilRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="LNG卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('3')"
        >
          <el-checkbox-group
            v-model="settingForm.LNGRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="LNG卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('4')"
        >
          <el-checkbox-group
            v-model="settingForm.CNGRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        -->
        <el-form-item
          label="手机充值成功推送通知"
          prop="manualChangeWxNotifyFlag"
        >
          <el-radio-group v-model="settingForm.manualChangeWxNotifyFlag">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          prop="customRemindAmount"
          label="自定义提示金额"
          v-if="$store.state.user.userLevel === '1'"
        >
          <el-input
            v-model="settingForm.customRemindAmount"
            style="width: 300px"
            size="mini"
            placeholder="请输入金额"
          />元
          <el-alert
            title="多个金额间以逗号隔开，最多四个自定义金额"
            type="info"
            show-icon
            :closable="false"
            style="padding: 0px 15px; width: 380px"
          >
          </el-alert>
        </el-form-item>
        <el-form-item prop="enjoyIntegralMultiple" label="支付产生积分倍数">
          电子卡支付产生的积分数量是微信支付产生积分数量的
          <el-input
            v-model="settingForm.enjoyIntegralMultiple"
            style="width: 60px"
            size="mini"
          />倍
        </el-form-item>
        <el-form-item label="会员日活动" required prop="discountTimeSetting">
          <el-radio-group v-model="settingForm.discountTimeSetting">
            <el-radio label="0">关闭</el-radio>
            <el-radio label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>

        <!--
          <el-form-item
            label="活动的周期类型"
            prop="discountTimeType"
            :required="settingForm.discountTimeSetting == 1"
          >
            <el-select
              v-model="settingForm.discountTimeType"
              clearable
              size="mini"
              @change="timeClear"
            >
              <el-option label="每周指定日" value="1"></el-option>
              <el-option label="每月指定日" value="2"></el-option>
              <el-option label="固定活动日" value="3"></el-option>
            </el-select>
            <div
              v-show="settingForm.discountTimeType != 3"
              style="
                display: flex;
                flex-wrap: wrap;
                border-style: solid;
                border-color: #f5f7fa;
              "
            >
              <div
                v-for="(item, index) in timeSelect[
                  settingForm.discountTimeType
                ]"
                :key="index"
                style="margin: 3px"
              >
                <div
                  class="hover-style"
                  style="
                    border-radius: 5px;
                    font-weight: bold;
                    font-size: 12px;
                    cursor: pointer;
                  "
                  @click="timeClickCalendar(index)"
                >
                  <div>{{ item }}</div>
                  <div
                    v-if="settingForm.collectClickCalendar.indexOf(index) > -1"
                    style="
                      width: 4px;
                      height: 4px;
                      border-radius: 50%;
                      background-color: red;
                      position: relative;
                      left: calc(50% - 2px);
                    "
                  ></div>
                  <div v-else style="width: 4px; height: 4px"></div>
                </div>
              </div>
            </div>
            <div v-show="settingForm.discountTimeType == 3">
              <el-date-picker
                clearable
                size="small"
                style="margin-left: 10px; width: 200px"
                v-model="settingForm.collectClickDay"
                type="dates"
                value-format="yyyy-MM-dd"
                placeholder="选择提醒时间设置"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          -->
        <el-form-item
          label="活动的周期类型"
          prop="availableControl"
          v-if="settingForm.discountTimeSetting == 1"
        >
          <el-select
            v-model="settingForm.discountTimeType"
            clearable
            size="mini"
            @change="availableControlChange"
          >
            <el-option label="每周指定日" value="1"></el-option>
            <el-option label="每月指定日" value="2"></el-option>
            <el-option label="固定活动日" value="3"></el-option>
          </el-select>
          <!-- <div style="margin-top: 10px">
              <select-day :type="settingForm.discountTimeType" :day.sync="settingForm.collectClickCalendar"
                :cycle.sync="settingForm.collectClickDay"></select-day>
            </div> -->
        </el-form-item>
        <el-form-item
          label="指定日期"
          prop="collectClickCalendar"
          v-if="settingForm.discountTimeSetting == 1"
        >
          <div
            style="margin-top: 10px"
            v-if="['1', '2', '3'].includes(settingForm.discountTimeType)"
          >
            <select-day
              :type="settingForm.discountTimeType"
              :day.sync="settingForm.collectClickCalendar"
              :cycle.sync="settingForm.collectClickDay"
            ></select-day>
          </div>
        </el-form-item>

        <el-form-item
          label="选择时间"
          prop="time"
          v-if="settingForm.discountTimeSetting == 1"
        >
          <div style="margin-top: 10px">
            <el-time-picker
              v-model="settingForm.startTime"
              placeholder="开始时间"
              value-format="HH:mm:ss"
            >
            </el-time-picker>
            <el-time-picker
              v-model="settingForm.endTime"
              placeholder="结束时间"
              value-format="HH:mm:ss"
            >
            </el-time-picker>
          </div>
        </el-form-item>

        <el-form-item
          label="活动的赠送比例"
          prop="presentScale"
          v-if="settingForm.discountTimeSetting == 1"
        >
          <el-input
            v-model="settingForm.presentScale"
            placeholder=""
            style="width: 70px"
          />%
        </el-form-item>
      </div>

      <!--
        <el-form-item
          prop="isMarket"
          label="是否叠加优惠方案"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isMarket">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          prop="isMarket"
          label="是否叠加优惠方案"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isMarket">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="isGradeSetting"
          label="是否叠加等级优惠"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isGradeSetting">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
        -->
      <!-- <el-form-item
          prop="isDiscountCoupon"
          label="是否叠加优惠券"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isDiscountCoupon">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item> -->
      <!--
        <el-form-item
          prop="isLabel"
          label="是否叠加标签"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isLabel">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
        -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" size="mini"
        >确 定</el-button
      >
    </div>

    <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
  </div>
</template>

<script>
import {
  addSetting,
  updateSetting,
  selectCustomerCardSetting,
} from "@/api/customer/cardSetting";
import SelectDay from "@/components/SelectDay";

export default {
  name: "Dzk_Rule",
  data() {
    const validateDiscountTimeType = (rule, value, callback) => {
      if (this.settingForm.discountTimeSetting == 0) {
        callback();
        return;
      }
      if (!this.settingForm.discountTimeType) {
        callback(new Error("请选择活动的周期类型"));
        return;
      }
      // if (
      //   this.settingForm.discountTimeType == 1 ||
      //   this.settingForm.discountTimeType == 2
      // ) {
      //   if (this.settingForm.collectClickCalendar.length <= 0) {
      //     callback(new Error("请选择活动的时间"));
      //     return;
      //   }
      // }
      // if (this.settingForm.discountTimeType == 3) {
      //   if (
      //     this.settingForm.collectClickDay == null ||
      //     this.settingForm.collectClickDay.length <= 0
      //   ) {
      //     callback(new Error("请填写活动时间"));
      //     return;
      //   }
      // }
      callback();
    };
    const validateCollectClickCalendar = (rule, value, callback) => {
      if (
        this.settingForm.discountTimeType == 1 ||
        this.settingForm.discountTimeType == 2
      ) {
        if (this.settingForm.collectClickDay.length <= 0) {
          callback(new Error("请选择活动的日期"));
          return;
        }
      }
      if (this.settingForm.discountTimeType == 3) {
        if (
          this.settingForm.collectClickCalendar == null ||
          this.settingForm.collectClickCalendar.length <= 0
        ) {
          callback(new Error("请填写活动时间"));
          return;
        }
      }
      callback();
    };
    const validateTime = (rule, value, callback) => {
      if (!this.settingForm.startTime || !this.settingForm.endTime) {
        callback(new Error("时间不能为空"));
        return;
      }
      callback();
    };
    const checkCustomRemindAmount = (rule, value, callback) => {
      const str = value ? value.trim() : "";
      const reg = /，/gi; // 匹配中文逗号
      if (str) {
        let valueArr = str.replace(reg, ",").split(",");
        if (valueArr && valueArr.length > 4) {
          return callback(new Error("最多可输入四个金额"));
        }
        // 判断每个金额输入的是否符合规范
        valueArr.some((item) => {
          // 判断 .44 格式的数字。 虽然这里会自动转换成数字，但是公众号那边会直接展示 .44 的价格不好
          if (item.startsWith("."))
            return callback(new Error("请输入正确的数字"));
          let val = Number(item);
          const reg = /^\d+(\.\d{1,2})?$/; // 最多两位小数点
          if (Number.isNaN(val)) return callback(new Error("请输入正确的数字"));
          if (val <= 0) return callback(new Error("金额应大于0"));
          if (!reg.test(val)) return callback(new Error("最多保留两位小数点"));
          if (val >= 100000000) return callback(new Error("最多8位长度数字"));
        });

        callback();
      } else {
        console.log("22");
        callback();
      }
    };
    return {
      title: "",
      // 表单参数
      settingForm: {
        manualChangeWxNotifyFlag: "0", //手机充值推送
        detailList: [],
        collectClickCalendar: [], // 收集固定日期选择的日子
        collectClickDay: [],
        cardOilsType: [],
        cardOilsTypeList: [],
        cardUseRangeFlag: "1",
        gasolineRuleList: [],
        dieselOilRuleList: [],
        LNGRuleList: [],
        CNGRuleList: [],
        startTime: "",
        endTime: "",
        customRemindAmount: "", // 自定义充值金额
        genericMinAmt: "0.01", //  通用卡最近充值金额
      },
      value2: "",
      itemIndex: null,
      open: false,

      settingRules: {
        cardEnabledFlag: [
          {
            required: true,
            message: "请选择是否启用电子卡",
            trigger: "change",
          },
        ],
        cardUseRangeFlag: [
          {
            required: true,
            message: "请选择权限",
            trigger: "change",
          },
        ],
        presentScale: [
          {
            required: true,
            message: "请填写活动赠送比例",
            trigger: "blur",
          },
        ],
        availableControl: [
          {
            required: true,
            validator: validateDiscountTimeType,
            trigger: "change",
          },
        ],
        collectClickCalendar: [
          {
            required: true,
            validator: validateCollectClickCalendar,
            trigger: "change",
          },
        ],
        time: [
          {
            required: true,
            validator: validateTime,
            trigger: "change",
          },
        ],
        discountTimeSetting: [
          {
            required: true,
            message: "请选择是否启用电子卡",
            trigger: "change",
          },
        ],
        gasolineMinAmt: [
          {
            required: true,
            message: "请填写汽油卡最低金额",
            trigger: "change",
          },
        ],
        dieselMinAmt: [
          {
            required: true,
            message: "请填写柴油卡最低金额",
            trigger: "change",
          },
        ],
        lngMinAmt: [
          {
            required: true,
            message: "请填写LNG卡最低金额",
            trigger: "change",
          },
        ],
        cngMinAmt: [
          {
            required: true,
            message: "请填写CNG卡最低金额",
            trigger: "change",
          },
        ],
        genericMinAmt: [
          {
            required: true,
            message: "请填写通用卡最低金额",
            trigger: "change",
          },
        ],
        enjoyIntegralMultiple: [
          {
            required: true,
            message: "请填写支付产生积分倍数",
            trigger: "change",
          },
        ],
        customRemindAmount: [
          { validator: checkCustomRemindAmount, trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.init();
    console.log(this.$store);
  },
  components: {
    SelectDay: SelectDay,
  },
  methods: {
    init() {
      selectCustomerCardSetting().then((response) => {
        this.settingForm = response.data;
        if (this.settingForm.customRemindAmount == "NaN") {
          this.settingForm.customRemindAmount = "";
        }
        if (!this.settingForm.manualChangeWxNotifyFlag) {
          this.settingForm.manualChangeWxNotifyFlag = "0";
        }
        if (!this.settingForm.cardOilsTypeList) {
          this.settingForm.cardOilsTypeList = [];
        }
        if (!this.settingForm.dieselOilRuleList) {
          this.settingForm.dieselOilRuleList = [];
        }
        if (!this.settingForm.gasolineRuleList) {
          this.settingForm.gasolineRuleList = [];
        }
        if (!this.settingForm.LNGRuleList) {
          this.settingForm.LNGRuleList = [];
        }
        if (!this.settingForm.CNGRuleList) {
          this.settingForm.CNGRuleList = [];
        }

        if (!this.settingForm.collectClickCalendar) {
          this.settingForm.collectClickCalendar = [];
        }
        this.settingForm.collectClickCalendar =
          this.settingForm.collectClickCalendar.filter((ele) => {
            return ele != "";
          });

        if (!this.settingForm.collectClickDay) {
          this.settingForm.collectClickDay = [];
        }

        this.settingForm = { ...this.settingForm };
      });
    },
    effectiveRefresh(e) {
      this.settingForm = { ...this.settingForm };
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.settingForm);
      this.$refs["settingForm"].validate((valid) => {
        if (valid) {
          // this.settingForm.cardOilsType =
          //   this.settingForm.cardOilsType.toString();
          if (this.settingForm.id != null) {
            // 最后再处理一下自定义金额值
            const reg = /，/gi; // 匹配中文逗号
            let amtStr = this.settingForm.customRemindAmount
              ? this.settingForm.customRemindAmount.trim()
              : "";
            let list1 = amtStr.replace(reg, ",").split(",");
            let list2 = list1.map((item) => parseFloat(item)).join(",");
            const params = { ...this.settingForm };
            params.customRemindAmount = list2;
            params.customRemindAmount =
              params.customRemindAmount == "NaN"
                ? ""
                : params.customRemindAmount;

            updateSetting(params).then((response) => {
              this.msgSuccess("修改成功");
              this.init();
            });
          } else {
            addSetting(this.settingForm).then((response) => {
              this.msgSuccess("新增成功");
              this.init();
            });
          }
        }
      });
    },

    availableControlChange() {
      this.settingForm.collectClickCalendar = [];
      this.settingForm.collectClickDay = [];
      this.settingForm = { ...this.settingForm };
    },
  },
};
</script>
